window.addEventListener("load", function () {
  const productNav = this.document.querySelector(".productnav");
  const series_item_in = this.document.querySelectorAll(".series-item-in");
  const lis = this.document.querySelectorAll(".productnav-item");
  const as = this.document.querySelectorAll(".productnav-link.js-nav-anchor");
  const line = this.document.querySelector(".line");
  this.addEventListener("scroll", function () {
    if (this.document.documentElement.scrollTop > 80) {
      productNav.classList.add("fixed");
    } else {
      productNav.classList.remove("fixed");
    }
    if (
      this.document.documentElement.scrollTop >= series_item_in[0].offsetTop &&
      this.document.documentElement.scrollTop < series_item_in[1].offsetTop
    ) {
      lis[0].click();
    } else if (
      this.document.documentElement.scrollTop >= series_item_in[1].offsetTop &&
      this.document.documentElement.scrollTop < series_item_in[2].offsetTop
    ) {
      lis[1].click();
    } else if (
      this.document.documentElement.scrollTop >= series_item_in[2].offsetTop &&
      this.document.documentElement.scrollTop < series_item_in[3].offsetTop
    ) {
      lis[2].click();
    } else if (
      this.document.documentElement.scrollTop >= series_item_in[3].offsetTop
    ) {
      lis[3].click();
    }
  });
  productNav.addEventListener("click", function (e) {
    if (e.target.tagName === "SPAN") {
      //   console.log(typeof e.target.innerText);
      //   console.log(e.target.offsetLeft);
      for (let i = 0; i < series_item_in.length; i++) {
        if (series_item_in[i].dataset.title === e.target.innerText) {
          document.documentElement.scrollTop = series_item_in[i].offsetTop;
        }
      }
    }
  });
  for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", function () {
      line.style.left = `${this.offsetLeft}px`;
      line.style.width = `${this.offsetWidth}px`;
    });
  }
});
